<template>
  <div>
    <h1>HelloA</h1>

    <input v-focus type="text" />


    <button @click="count++">{{ count }}</button>

    <button v-add-class="className" @click="className = 'world'">点我</button>
  </div>
</template>

<script>
export default {
  // 局部注册一个 focus 的指令

  directives: {
    focus: {
      // bind(el, aa) {
      //   console.log('bind', el, aa)
      //   el.classList.add('box')

      // },

      inserted(el) {
        // console.log('inserted', el)

        el.focus()
      },

      update(el) {
        // console.log('update', el)
      }
    },

    // addClass: {
    //   bind(el, aaaa) {
    //     console.log('bind', aaaa)
    //     el.classList.add(aaaa.value)
    //   },

    //   update(el, aaaa) {
    //     // 组件数据发生变化，就会执行，因为这个点，所有可以对真正要用的数据做判断看看是否要往下执行
    //     console.log('update', aaaa)

    //     if (aaaa.oldValue === aaaa.value) {
    //       return
    //     }

    //     // 添加 world 的时候，要将 hello 给删除
    //     el.classList.remove(aaaa.oldValue)
    //     el.classList.add(aaaa.value)
    //   }
    // },

    // 简写方式
    addClass: function(el, binding) {
      // bind 和 update 的时候，都触发
      console.log('addClass', binding)

      if (binding.oldValue === binding.value) return

      el.classList.remove(binding.oldValue)
      el.classList.add(binding.value)
    }
  },

  data() {
    return {
      className: 'hello',
      count: 1
    };
  },

  created() {
    // console.log(document.querySelector('input'))
  },

  mounted() {
    // document.querySelector('input').focus()
  }
};
</script>
